[CSS] 사파리에서 transform 속성 rotateY 또는 transrateZ값 문제

우선 애니메이션 구현시 자주 사용하는 transform 속성에 나타나는 문제를 해결하고자 합니다. 대부분의 최신 브라우저는 정상적이나 Safari(사파리)와 익스플로러 예전 버전(8.0 이하)에서 나타나는 문제를 해결하기 위한 방법입니다. 그럼 해당하는 문제가 어떤 브라우저이냐에 따라 아래 내용을 참고해주세요.

# 사파리(Safari) 브라우저에서 발생할 경우

웹킷엔진인 사파리에서 3d효과를 구현하기 위해 CSS3의 translate 속성을 사용할 경우 유독 Safari에서만 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 수 많은 구글링이 필요했고 결국 방법은 찾았습니다.

# 부모 요소에 -webkit-perspective 속성을 사용할 것
-webkit-perspective 속성은 3d 요소가 얼마만큼 나타나게 될지를 결정하는 속성으로 원근감을 표현할 때 사용할 수 있는 속성입니다. 이 속성을 부모요소에 사용하니 사파리에서도 정상 작동됨을 확인하였습니다.

! 익스플로러(IE) 8.0 이하 버전에서 발생하는 문제

구 IE의 문제를 해결하기 위해 많이 사용되는 방법이 구버젼 해결을 위한 스크립트를 사용하거나 htc 파일을 import 시키는 방법이 자주 사용됩니다. 가장 간단한 방법은 htc 파일을 import시키는 방법이라 생각합니다.

제가 해결한 방법은 htc 파일을 사용한 방법으로 구 버젼의 IE에서 가장 넓리 쓰이고 잘 알려진 방법입니다. 우선 ms-transform 문제를 해결하기 위해서 ms-transform.htc을 다운받아야합니다.

Github 다운로드 바로가기 > https://github.com/zvona/ms-transform

다운이 완료될 경우 해당하는 요소의 css에 해당 htc 파일을 import하세요.

예를 들어 test 요소에 적용하실꺼라면 다운받은 파일을 적당한 경로에 넣은 뒤 behavior속성을 사용해 불러오면 됩니다. 그리고 적용시 -ms-transform 속성을 사용합니다.